*{
    margin: 0;
    padding: 0;
}
.canva{
    width: 100vw;
    height: 100vh;
    background: #f5f5ff;
     display: flex;/*弹性容器,显示在正中间 */
    justify-content: center;
    align-items: center;
}
.circle{
    width: 70vmin;
    height: 70vmin;
    background: #e8e0ff;
    border-radius: 50%;
     display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;/*修改弹性方向*/
}
.ghost{
     position: relative; 
    width: 30vmin;
    height: 30vmin;
    border: 0.5vmin solid #000;
    border-bottom: 0;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    box-sizing: border-box;
    background: #ffdcdf;
}
.leg{
    display: flex;
    width: 30vmin;
}
.leg div{
width: 7.5vmin;
height: 6vmin;
border: 0.5vmin solid #000;
border-top: 0;
border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background: #ffdcdf;
}
.heart{
    position: relative;
    width: 5vmin;
    height: 5vmin;
    background: #ff3737;
transform: translate(22vmin,6vmin) rotate(25deg) scale(0.5)/*缩放到原来的50%*/;

}
.heart::before{
    content:'';
    width: 5vmin;
    height: 5vmin;
    border-radius: 50%;
    background: #ff3737;
    position: absolute;
    bottom: 0;
    left: -2.5vmin;
}
.heart::after{
    content:'';
    width: 5vmin;
    height: 5vmin;
    border-radius: 50%;
    background: #ff3737;
    position: absolute;
    right: 0;
    top:-2.5vmin;
}
.eyes{
    position: absolute;
    width: 5vmin;
    height: 5vmin;
    background: #000;
    border-radius: 50%;
    left: 5vmin;
    top:13vmin;
    box-shadow: 14vmin 0;/*投影往右边移动14vmin*/
}
.eyes::before{
    content: '';
    position: absolute;
    background: #fff;
    width: 2.5vmin;
    height: 2.5vmin;
    border-radius: 50%;
    left: 2vmin;
    box-shadow: 14vmin 0 #fff;
}
.mouth{
    width: 4vmin;
    height: 2vmin;
    border: 0.7vmin solid #000;
    border-top: 0;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    top:16vmin;
    left: 12vmin;

}
.left-hand{
    position: absolute;
    width: 4vmin;
    height: 4vmin;
    border: 0.5vmin solid #000;
    border-top: 0;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    top:22vmin;
    left: 6vmin;
    transform: rotate(-25deg) ;
}
.right-hand{
    position: absolute;
    width: 4vmin;
    height: 4vmin;
    border: 0.5vmin solid #000;
    border-top: 0;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    top:22vmin;
    left:18vmin;
    transform: rotate(25deg) ;
}